<template>
  <div>
    <a-row>
      <a-col :span="12">
        <a-input v-model:value="state.name" placeholder="输入名称搜索" allowClear />
      </a-col>
      <a-col :span="12" style="padding-left: 20px">
        <a-button type="primary" @click="searchBtn"> <search-outlined />查询 </a-button>
      </a-col>
    </a-row>
  </div>
  <div style="margin: 10px 0">
    <a-table
      :dataSource="state.perfList"
      :row-key="(record:any) => record.id"
      :pagination="state.pagination"
      :loading="state.loading"
      @change="handleTableChange"
      :columns="state.columns"
      :scroll="{ y: 800 }"
      bordered
    >
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import { getPerfList } from "@/service/perf/index";

const state: any = reactive({
  name: "",
  loading: false,
  perfList: [],
  columns: [
    {
      title: "name",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "type",
      dataIndex: "type",
      key: "type",
    },
    {
      title: "path",
      dataIndex: "path",
      key: "path",
    },
    {
      title: "fp_count",
      dataIndex: "fp_count",
      key: "fp_count",
    },

    {
      title: "tcp_count",
      dataIndex: "tcp_count",
      key: "tcp_count",
    },

    {
      title: "dns_count",
      dataIndex: "dns_count",
      key: "dns_count",
    },

    {
      title: "dcl_count",
      dataIndex: "dcl_count",
      key: "dcl_count",
    },

    {
      title: "创建人",
      dataIndex: "create_user_id",
      key: "create_user_id",
    },
  ],
  pagination: {
    showSizeChanger: true,
    pageSizeOptions: ["3", "6", "9"],
    total: 3,
    current: 1,
    pageSize: 3,
  },
});
const searchProductAction = async () => {
  state.loading = true;
  try {
    const res = await getPerfList({
      name: state.name,
      pageSize: state.pagination.pageSize,
      page: state.pagination.current,
    });
    console.log("res", res);
    state.perfList = res?.data?.data;
  } catch (e) {
    console.log(e);
    state.perfList = [];
  }
  state.loading = false;
};

const searchBtn = () => {
  searchProductAction();
};

const handleTableChange = ({ pageSize, current }) => {
  state.pagination.current = current;
  state.pagination.pageSize = pageSize;
  searchBtn();
};

onMounted(() => {
  searchBtn();
});
</script>
